@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                 <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 100px"
                     @on-change="dateStartFormat">
                     </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 100px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>

                <span style="padding-left: 10px">
                      <i-select style="width: 100px;" v-model="liver">
                            <i-option value="沈立妙">沈立妙</i-option>
                            <i-option value="范丽斌">范丽斌</i-option>
                            <i-option value="林秋华">林秋华</i-option>
                            <i-option value="林双">林双</i-option>
                            <i-option value="郑梅娟">郑梅娟</i-option>
                      </i-select>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="getList">查询</i-button>
                </span>

                <span style="padding-left: 10px">
                       <a :href="combine_link" style="display: inline-block;margin-left: 15px;">数据下载</a>
                </span>

            </i-col>



        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" height="800" border :columns="tableColumns" stripe
                         style="width: 100% !important;" @on-sort-change="changeSort">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '日期',
                            key:'date',
                        },
                        {
                            title: '主播',
                            key:'liver',
                        },
                        {
                            title: '订单数',
                            key:'order_count',
                            sortable:true
                        },
                        {
                            title: '购买人数',
                            key:'user_count',
                        },
                        {
                            title: '成交金额',
                            key:'actual_payment_amount',
                            sortable:true
                        }

                    ],
                    spinShow:false,
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    defaultStartTime:'',
                    defaultEndTime:'',
                    liver:'',
                    key:"",
                    order:'',
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                getList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/taobao/liver/business",{
                        params: {
                            token:vm.token,
                            page:page,
                            start_time: that.defaultStartTime,
                            end_time: that.defaultEndTime,
                            liver:that.liver,
                            order:that.order,
                            key:that.key
                        }
                    })
                        .then(function (response) {
                            vm.tableData = response.data.result.data;
                            vm.page.total = response.data.result.total;
                            vm.page.current = response.data.result.current_page;
                            vm.page.pageSize = response.data.result.per_page;
                            that.spinShow = false;
                        });
                },
                dateStartFormat(f,v){
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){
                    this.defaultEndTime = f;
                },
                changeSort(param){
                    this.key = param.key;
                    this.order = param.order;
                    this.getList(1);
                },
            },
            computed: {
                combine_link() {
                    return '/admin/order/taobao/liver_export?liver=' + this.liver + '&token=' + this.token;
                }

            }

        });

        vm.token = getToken();
        vm.getList(1);

    </script>

@endsection

